<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>我的购物车</title>
		<meta name="decorator" content="default"/>
		<script type="text/javascript" src="${ctxStatic }/js/hidden_nav.js"></script>
	</head>
<body>
<div class="nav_hidden">
	<div class="nav_center">
    	<div class="headnav">
        	<span>全部药品分类</span>
            <p></p>
            <div class="nav_hid" style=" display:none;">
                <div class="subhid">
                	<h3>中成药</h3>
                    <ul class="cathid">
                    	<li class="cathidden">
                        	<a class="x_3" href="#">心脑血管</a>
                            <a class="x_3" href="#">心脑血管</a>
                        </li>
                   		<li class="cathidden">
                        	<a class="x_3" href="#">心脑血管</a>
                            <a class="x_3" href="#">心脑血管</a>
                        </li>
                        <li class="cathidden">
                        	<a class="x_3" href="#">心脑血管</a>
                            <a class="x_3" href="#">心脑血管</a>
                        </li>
                        <li class="cathidden">
                        	<a class="x_3" href="#">心脑血管</a>
                            <a class="x_3" href="#">心脑血管</a>
                        </li>
                        <li class="cathidden">
                        	<a class="x_3" href="#">心脑血管</a>
                            <a class="x_3" href="#">心脑血管</a>
                        </li>
                        <li class="cathidden">
                        	<a class="x_3" href="#">心脑血管</a>
                            <a class="x_3" href="#">心脑血管</a>
                            <a class="x_3" href="#">心脑血管</a>
                        </li>
                        <li class="cathidden">
                        	<a class="x_3" href="#">心脑血管</a>
                            <a class="x_3" href="#">心脑血管</a>
                            <a class="x_3" href="#">心脑血管</a>
                        </li>
                    </ul>
                </div>
                <div class="subhid">
                	<h3>医疗器械</h3>
                    <ul class="cathid">
                    	<li class="cathidden">
                        	<a class="x_3" href="#">心脑血管</a>
                            <a class="x_3" href="#">心脑血管</a>
                            <a class="x_3" href="#">心脑血管</a>
                        </li>
                        <li class="cathidden">
                        	<a class="x_3" href="#">心脑血管</a>
                            <a class="x_3" href="#">心脑血管</a>
                            <a class="x_3" href="#">心脑血管</a>
                        </li>
                        <li class="cathidden">
                        	<a class="x_3" href="#">心脑血管</a>
                            <a class="x_3" href="#">心脑血管</a>
                            <a class="x_3" href="#">心脑血管</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div> 
<div class="cart_thead">
	<table>
    	<thead>
        	<tr>
            	<th width="100px"><input class="t_checkbox" type="checkbox"></input>全选</th>
                <th width="198px">商品信息</th>
                <th width="180px">生产厂家</th>
                <th width="100px">规格</th>
                <th width="120px">数量</th>
                <th width="100px">单价</th>
                <th width="100px">小计</th>
                <th width="100px">操作</th>
            </tr>
        </thead>
    </table>
</div>
<div class="cart_body">
	<h4>药速达</h4>
    <ul class="pro_listbox">
    
      <form id="cartForm" name="cartForm" action="${ctx}/genorder">
	    	<c:forEach items="${cartList}" var="cart" varStatus="status">
		    	<li class="act">
		    		<input type="hidden" value="${cart.id }" name="id" />
		        	<div class="disb item01"><input type="checkbox" value="${cart.productions.id  }" name="prodId" id="prodId"/></div>
		            <div class="disb item02">
		            	<a href="#">
		                    <c:if test="${not empty cart.productions.pics}">
		                    	<c:set value="${fn:split(cart.productions.pics, '|')}" var="pic" />
		                    	<img src="${svr_url}${pic[0]}" style="width:40px;height:40px;"/>
		                    </c:if>
		                    <c:if test="${empty cart.productions.pics}">                    	
		                    	<img src="${ctxStatic }/images/defaultprod.jpg" style="width:40px;height:40px;"/>
		                    </c:if>
		            	</a>
		            </div>
		            <div class="disb item03"><p>${cart.productions.proName }</p></div>
		            <div class="disb item04"><p>${cart.productions.proEnterprise }</p></div>
		            <div class="disb item05"><p>${cart.productions.etalon }</p></div>
		            <div class="disb item06">
		            	<a class="sub_btn" href="#">-</a>
		                <input class="num_txt" type="text" value="${cart.amout }" name="num" />
		                <a class="add_btn"  href="#">+</a>
		            </div>
		            <div class="disb item07"><span id="costPrice${cart.productions.id}">${cart.costPrice }</span></div>
		            <div class="disb item08">￥<span id="totalPrice">${cart.totalPrice }</span></div>
		            <div class="disb item09"><a href="${ctx}/delfromcart?id=${cart.id}" onclick="return confirmx('确认要移除购物车吗？', this.href) ">移除</a></div>
		        </li>
		    </c:forEach>
		</form>
    </ul>
    <p class="total_price">合计：元</p>
</div>
<div class="cart_tfooter">
	<table>
    	<thead>
        	<tr>
            	<th width="100px"><input  class="t_checkbox" type="checkbox" />全选</th>
                <th width="50px"></th>
                <th width="80px"><a href="${ctx}/clearcart" onclick="return confirmx('确认要清空购物车中的所有商品吗？', this.href) ">清空购物车</a></th>
                <th width="180px">已选<span class="tfooter_num">0</span>件商品</th>
                <th width="240px">商品总价：<span class="tfooter_price">0.00元</span></th>
                <th width="130px"><a class="go_on" href="${ctx}/index">继续购物</a></th>
                <th width="130px"><a class="tfooter_yes" href="#" id="btnSubmit">提交订单</a></th>
            </tr>
        </thead>
    </table>
</div>

	<script type="text/javascript">
		//
		function calFooterPrice(){
			var footerPrice = 0.0;
			$("input[id=prodId]:checkbox:checked").each(function(){
				var totalPrice = $(this).parent().parent().children(".item08").children("span").text();
				footerPrice += parseFloat(totalPrice); 
			});
			
			$(".tfooter_price").text(footerPrice);
		}
	
		$(function(){
			
			calTotalAndSumPrice();
			
			//设置选择商品的数量
			$("input[name=prodId]").click(function(){
				var len = $("input[id=prodId]:checkbox:checked").length;
					
				$("span.tfooter_num").text(len);
				calFooterPrice();
			});
			
			//设置全选、反选
			$("input[class='t_checkbox']").click(function(){
				var prodCheck = $("input[name='prodId']");
				var nums = 0;
				if ($(this).attr("checked")){
					prodCheck.attr("checked",true); 
					nums = $("input[id=prodId]:checkbox:checked").length ;//去掉本身（全选checkbox）的数量
				} else{
					prodCheck.attr("checked",false); 
					nums = 0;
				}
				
				$("span.tfooter_num").text(nums);
				calFooterPrice();
			});
			
			/*
			    根据数量的变化动态计算商品价格，合计价格.
			*/
			$(".num_txt").each(function(){
				$(this).numeral();//
			
				$(this).on("blur keyup",function(){
					if("" == $(this).val()) {
						$(this).val("1");
					}
					
					//计算商品价格
					var productId = $(this).parent().parent().children(".item01").children("input").val();//商品id
					
					calcPrice(productId, $(this).val(), $(this));
					
				})		
			});	
			
			/*
			    数量加、减操作
			*/
			$("a.sub_btn").each(function(){
				$(this).on("click", function(){
					var o = $(this).next();
					var n = parseInt(o.val());
					if(n>1){
						o.val(n-1);
						//计算商品价格
						var productId = $(this).parent().parent().children(".item01").children("input").val();//商品id
						calcPrice(productId, o.val(), $(this));						
					}
				});
			});
			$("a.add_btn").each(function(){
				$(this).on("click", function(){
					var o = $(this).prev();
					var n = parseInt(o.val());
					o.val(n+1);		
					
					//计算商品价格
					var productId = $(this).parent().parent().children(".item01").children("input").val();//商品id
					calcPrice(productId, o.val(), $(this));
				});
			});			
			
			//计算取客户价格
			function calcPrice(id, num, obj){
				$.post("${ctx}/getprice",
					{"id":id, "num": num},
					function(price){
						$("#costPrice"+id).text(price);
						
						//计算商品合计价格
						var totalPriceObj = $(obj).parent().parent().children(".item08").children("span");//合计价格对象
						var totalPrice = parseFloat(num) * parseFloat(price);
						totalPriceObj.text(totalPrice);
						
						calTotalAndSumPrice();
						calFooterPrice();
					}
				);
			}
			
			//计算并显示小计、合计价格
			function calTotalAndSumPrice(){
				//初始化显示购物车数量、总价格等信息
				var sumPrice = 0;//商品总价
				$(".item08 span").each(function(){
					sumPrice += parseFloat($(this).text());
				});
				
				$("p.total_price").text("合计：￥" + sumPrice + "元");//合计位置
			}
			
			/*
				提交生成订单按钮
			 */
			$("#btnSubmit").click(function(){
				var len = $("input:checkbox:checked").length;
				if (len == 0) {
					showTip("请首先选择需要生成订单的商品.");
					return;
				}
				
				return confirmx('确认要生成订单吗？', 
							function(){
					 			$("#cartForm").submit();
				});
				
			});
		
		});
	
	</script>
</body>
</html>